<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">

       <el-form-item label="客户姓名" >
        <el-input v-model="cpClient.name" size="small" style="width: 140px" clearable></el-input>
      </el-form-item>

      

       <el-form-item label="登录账号">
        <el-input v-model="cpClient.number" width="200px !" size="small" style="width: 140px" clearable></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="cpClient.sex" size="small" style="width: 140px" clearable>
          <el-option :value="0" :label="'女'" />
          <el-option :value="1" :label="'男'" />
        </el-select>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="cpClient.mobile" size="small" style="width: 140px" clearable></el-input>
      </el-form-item>

      <el-form-item label="账号等级">
        <el-select v-model="cpClient.accountLevel">
          <el-option :value="0" :label="'普通用户'" />
          <el-option :value="1" :label="'VIP用户'" />
        </el-select>
      </el-form-item>

      <el-form-item label="是否投资商">
        <el-select v-model="cpClient.investor">
          <el-option :value="0" :label="'否'" />
          <el-option :value="1" :label="'是'" />
        </el-select>
      </el-form-item>

      <el-form-item label="开充电卡">
        <el-select v-model="cpClient.electricCard">
          <el-option :value="0" :label="'否'" />
          <el-option :value="1" :label="'是'" />
        </el-select>
      </el-form-item>

       <el-form-item label="实名认证">
        <el-select v-model="cpClient.realName">
          <el-option :value="0" :label="'未认证'" />
          <el-option :value="1" :label="'已认证'" />
        </el-select>
      </el-form-item>


      <el-form-item label="积分">
        <el-input v-model="cpClient.integral" size="small" style="width: 140px" clearable></el-input>
      </el-form-item>

      <el-form-item label="身份证">
        <el-input v-model="cpClient.identityCard" size="small" style="width: 140px" clearable></el-input>
      </el-form-item>

      <el-form-item label="居住地址">
        <el-input v-model="cpClient.address"  style="width: 200px" clearable></el-input>
      </el-form-item>

      <el-form label-width="120px">
        <el-form-item label="上传照片(修改前)">
        <el-image
                    style="width: 150px;"
                    :src="image"
                    :preview-src-list="[image]"
                  />
        </el-form-item>
        <el-form-item label="上传照片(请修改)">
          <el-upload
            :on-success="onUploadSuccessIdCard1"
            :on-remove="onUploadRemove"
            :multiple="false"
            :action="uploadUrl"
            :data="{ module: 'idCard77' }"
            :limit="1"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    
      <el-form-item>
        <router-link
          :to="'/charging-pile/client'"
          style="margin-right: 5px"
        >
          <el-button type="default" size="small">返回</el-button>
        </router-link>
        
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          size="small"
          @click="updateData()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//引入api模块

import ClientApi from '@/api/charging-pile/cilent'

export default {
  data() {
    let BASE_API = process.env.BASE_API || 'http://localhost:8130'
    return {
      saveBtnDisabled: false, //是否禁用保存按钮，防止表单重复提交
      image:'',
      cpClient: {
        picture: '',
      }, //积分等级对象
      // uploadUrl: BASE_API + '/api/oss/file/upload', //文件上传地址
      uploadUrl: BASE_API + '/api/oss/file/upload',
    }
  },
  created() {
     //当路由中存在id属性的时候 就是回显表单，需要调用会先数据的接口
      if(this.$route.params.id){
        this.ById(this.$route.params.id)
      }
  },

  methods: {

       ById(id){
          ClientApi.findClientById(id).then(response =>{
            this.image = response.data.list.picture
            this.cpClient = response.data.list
          })
         }, 


        updateData() {
    // 数据的获取
            this.cpClient.id = this.$route.params.id
            ClientApi.updateClient(this.cpClient).then(response => {
              console.log(response);
              this.$message.success(response.message)
               this.$router.push('/charging-pile/client')
            })
        },
      

    saveOrUpdate() {
    // 禁用保存按钮
    this.saveBtnDisabled = true
    if (!this.cpClient.id) {
        this.saveData()
    } else {
        this.updateData()
    }
},

    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, 'idCard77')
    },
    onUploadSuccess(response, file, type) {
      if (response.code === 0) {
        console.log('进来了')
        this.cpClient.picture = response.data.url
        //业务成功,填充borrower.borrowerAttachList列表
        // this.cpHitch.hiddenImg.push({
        //   // imageName: file.name,
        //   // imageUrl: response.data.url,
        //   // imageType: type,
        //   hiddenImg: response.data.url,
        // })
      } else {
        //业务失败
        this.$message.error(response.message)
      }
    },
    onUploadRemove(file, fileList) {
      console.log('fileList', fileList)
      console.log(file.response.data.url)
      ClientApi.onUploadRemove(file.response.data.url).then((res) => {
        console.log('远程删除文件成功', file)
      })
      //调用远程文件删除接口
      // this.$axios
      //   .$delete('/api/oss/file/removeFile?url=' + file.response.data.url)
      //   .then((response) => {
      //     console.log('远程删除文件成功', file)
      //   })
      //从this.borrower.borrowerAttachList列表中删除对象
      // this.cpHitch.hiddenImg = this.cpHitch.hiddenImg.filter(function (item) {
      //   return item.imageUrl != file.response.data.url
      // })
    },
  },
}
</script>
